<template>
  <el-scrollbar height="780px">
    <div class="patientCard">
      <div class="operation-info" v-for="item in patienList" :key="item.id">
        <div class="operation-content">
          <div class="pat-info">
            <img src="@/assets/home/avtar.png" alt="" class="avtar" />
            <span class="name">{{ item.patientName }}</span>
            <span>{{ item.gender == "1" ? "男" : "女" }}</span>
            <span>{{ item.patientAge }}</span>
            <span>{{ item.patRank }}</span>
          </div>
          <div class="operation">
            <div>既往史：{{ item.history }}</div>
          </div>
          <div class="operation">
            <div>过敏项：{{ item.allergen }}</div>
          </div>
          <div class="operation">
            <div>体征数据: {{ item.physicalData }}</div>
          </div>
          <div class="footer">
            <div class="expect">
             主治医生 : {{ item.doctor }}
            </div>
            <div class="btn" @click="onApplyfor(item)">申请会诊</div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import subTitle from "@/components/Title/subtTitle.vue";
import { useRouter } from "vue-router";
import { getAllPat } from "@/api/index.js";
import usePatientInformation from "@/store/usePatientInformation.js";
const PatientInformation = usePatientInformation();

const router = useRouter();
// 患者列表
const patienList = ref([]);
// 申请会诊
const onApplyfor = (item) => {
  router.push("/consultationApplyfor");
  PatientInformation.patientInforList = item;  // 存储患者信息
};
const btnmsg = (item) =>{
  PatientInformation.patientInforList = item;
  router.push("/consultationApplyfor");
}
onMounted(() => {
  // 发送请求，获取患者数据
  getAllPat().then((res) => {
    console.log(res, "res");
    patienList.value = res;
  });
});
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 15px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(214, 227, 226, 0.12) 1.24%,
    rgba(233, 226, 226, 0.278) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(235, 229, 229, 0.1) 55.65%,
    rgba(226, 233, 232, 0.2) 94.34%
  );
}

@mixin bg1() {
  padding: 5px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(0, 0, 0, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(56, 189, 176, 0.2) 94.34%
  );
}

@mixin bg2() {
  padding: 5px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(9, 224, 202, 0.298) 1.24%,
    rgba(132, 230, 234, 0.765) 64.01%
  );
  border-image-source: linear-gradient(
    130.78deg,
    rgba(9, 224, 202, 0.793) 1.24%,
    rgba(67, 213, 198, 0.397) 94.34%
  );
}

@mixin bg3() {
  padding: 5px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(224, 174, 36, 0.298) 16.24%,
    rgba(132, 231, 234, 0.627) 64.01%
  );
  border-image-source: linear-gradient(
    130.78deg,
    rgba(224, 192, 9, 0.793) 1.24%,
    rgba(130, 183, 6, 0.397) 94.34%
  );
}
.patientCard {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 默认每行 2 个元素 */
  gap: 10px;
  .operation-info {
    @include bg();
    .operation-content {
      .pat-info {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .name {
          color: #fff;
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 100% */
        }
        .avtar {
        }
        span {
          color: #fff;
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
        }
      }
      .operation {
        display: flex;
        align-items: center;
        margin-left: 20px;
        margin-top: 10px;
        .ssmc {
          color: var(--Gray-Gray5, #c5c5c5);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          margin-right: 10px;
          line-height: 20px; /* 142.857% */
          font-size: 18px;
        }
        span {
          color: #fff;
          font-family: "Microsoft YaHei";
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
        }
      }
      .footer {
        margin-left: 15px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .expect {
          color: #fff;
          font-size: 13px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
          @include bg1();
        }
        .btn {
          @include bg2();
          color: #fff;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
          cursor: pointer;
        }

        .btn1 {
          @include bg3();
          color: #fff;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px; /* 150% */
          cursor: pointer;
        }
      }
    }
  }
}
</style>
